<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:180px" />
    <div class="tool-box-left-top">
      <p>
        <a-popover placement="rightTop">
          <template #content>
            <div style="line-height: 1em;">
            <p>箭头：(上下左右)旋转</p>
            <p>D：缩小</p>
            <p>S：放大</p>
            <p>A：向左旋转</p>
            <p>F：向右旋转</p>
            <p>E：向上旋转</p>
            <p>W：向下旋转</p>
            </div>
          </template>
          <template #title>
            <span style="color: #fff;">提示</span>
          </template>
          <button :class="{ active }" @click="shortcutAction = !shortcutAction">启用键盘操控</button>
        </a-popover>
      </p>
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div> -->
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
// https://sandcastle.cesium.com/?src=Camera%20Tutorial.html&label=All
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false
      },
      layers: [
        { type: 'tdtIboMap', options: { brightness: 1, show: true } },
        { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
        // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
        { type: 'graticule', options: { brightness: 1, show: true } }
      ],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: true //启用以太阳为光源的地球
      },
      bottomContainer: false,
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      shortcutAction: true,
      hideLayers: false
      // },{
      //   dom: "cesium-viewer#2",
      //   name: "viewer2",
      //   title: "viewer 2",
      //   options:{
      //     imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      //     imageryProvider: null,
      //     terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      //     terrainProvider: null,
      //     shadows: false,
      //   }
    }
  ]
};

export default defineComponent({
  name: 'shortcut', // 键盘操控
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  setup() {
    return {};
  },
  props: {},
  data() {
    return {
      g3v: null,
      shortcutAction: true
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    g3vViewer() {
      return this.g3v && this.g3v.g3vViewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    active() {
      return this.shortcutAction;
    }
  },
  watch: {
    shortcutAction(val) {
      this.g3vViewer.shortcutAction = val;
    }
  },
  mounted() {
    console.log('Camera mounted');
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions, () => {
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      const { viewer, g3vViewer } = this;
      // g3vViewer.shortcutAction = false
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;

  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }

    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}
</style>
